<template>
  <div class="contain">
    <el-carousel  class="siwpers" height="30rem">
        <el-carousel-item v-for="item in swiperList" :key="item.id">
            <div class="siwpers-img">
                <img class="siwper-items" :src="item.img" alt="">
            </div>
        </el-carousel-item>
    </el-carousel>
    <div class="center-msg">
           <div class="operate-msg">
                <div class="title">召回详情</div>
                <div class="msg-detail">
                    <div class="detail-box">
                        <div><span class="detail-name">经营品种：</span><span  class="detail-name1">{{contentMsg.productName}}</span></div>
                        <div><span class="detail-name">召回时间：</span><span  class="detail-name1">{{contentMsg.recallDate}}</span></div>
                        <div><span class="detail-name">批号：</span><span  class="detail-name1">{{ contentMsg.batchNo }}</span></div>
                        <div><span class="detail-name">召回范围：</span><span  class="detail-name1">{{contentMsg.traceStep}}</span></div>
                        <div><span class="detail-name">品种图片：</span></div>
                        <img class="photo-fruit" :src="contentMsg.prodImg" alt="">
                    </div>   
                </div>
                <div class="recovery-detail">
                    <div class="detail-name">召回原因及公告：</div>
                    <div class="detail-show" v-html="contentMsg.reason"></div>
                </div>
        </div>
    </div>
  </div>
</template>

<script setup>
import {getBannerList,findRecallById} from '../../util/api.js'
 const route = useRoute()
 const swiperList =ref([])
 const contentMsg =ref([])
 const getBannerLists = async()=>{
            let res= await getBannerList({type:'产品召回'})
            console.log(res)
            if(res.code!=200)return
            swiperList.value=res.data
 }
 const getDetail=async()=>{
   let res= await findRecallById(route.query.id)
//    console.log(res)
   if(!res)return
   contentMsg.value = res.recall
}
 onMounted(()=>{
    getBannerLists()
    getDetail()
    
 })
</script>

<style lang="scss" scoped>
 .contain{
    width: 100%;
    .siwpers{
        width: 100%;
        height: 480px;
        :deep(.el-carousel__arrow--left){
                width: 60px;
                height: 60px;
                left: 80px;
                border: 1px solid #ffffff;
                font-weight: 500;
                font-size: 16px;
                color: #ffffff;
                background: none;
                }

                //右箭头
        :deep(.el-carousel__arrow--right){
        width: 60px;
        height: 60px;
        right: 80px;
        border: 1px solid #ffffff;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        background: none;
        }
        .siwpers-img{
            width: 100%;
            height: 480px;
            background-size: 100% 100%;
            position: relative; 
            .siwper-items{
                width: 100%;
                height: 100%;
            }           
        }
    } 
    .center-msg{
        width: 100%;
        background-color: #ffffff;
        padding: 54px 224px;
        box-sizing: border-box;
        .record-time{
            height: 28px;
            font-size: 28px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #009966;
            border-bottom: 1px rgba(0,0,0,0.15) solid;
            padding-bottom: 30px;
            margin-bottom: 30px;
        }
        .operate-msg{
            width: 100%;
            .title{
                font-size: 30px;
                font-weight: 400;
                color: #009966;
                margin-bottom: 30px;
            }
            .msg-detail{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                .detail-box{
                    width: 50%;
                    font-weight: 500;
                    font-size: 22px;
                    color: #1F1F1F;
                    .photo-fruit{
                        width: 70%;
                        height: 260px;
                    }
                    .detail-name{
                        font-weight: 400;
                        color: #A3A3A3;
                        font-size: 22px;
                    }
                }
                .detail-box div{
                    margin-bottom: 15px;
                }
            }
            .recovery-detail{
                .detail-name{
                        font-weight: 400;
                        color: #A3A3A3;
                        font-size: 22px;
                        margin-top: 40px;
                        margin-bottom: 20px;
                }
                .detail-show{
                    background: #FFFFFF;
                    border-radius: 10px;
                    border: 1px solid #E0E0E0;
                    font-weight: 400;
                    color: #1F1F1F;
                    font-size: 22px;
                    height: 343px;
                    overflow-y: auto;
                    padding: 20px;
                    box-sizing: border-box;
                    line-height: 40px;
                }
            }
        }
    }
 }
</style>
